<template>
    <div>
        <div class="header">
            <van-nav-bar title="订单" @click-left="$router.push('/home')">
                <template #left>
                    <van-icon name="arrow-left" size="25" color='black' />
                </template>
            </van-nav-bar>
        </div>

        <div class="main">
            <div class="top10">
          <van-list>
            <!-- ----两套布局---- -->
            <ul :class="isShow ='prolist1' ">
              <li class="van-hairline--bottom van-hairline--right" v-for="(item, index) in orderList" :key="index" @click="jumpTo(item.proid)">
                <img width="100%" :src="item.img1">
                <div>
                  <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
                  <p>￥<span>{{ item.originprice }}</span></p>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
        </div>
    </div>
</template>

<script>
import {  getOrderList } from "../../api/cart";
export default {
    data() {
        return {
            orderList:[]
        }
    },
    methods: {
        jumpTo(proid){
            this.$router.push('/detail/' + proid)
        }
    },
    created() {

    getOrderList({userid:localStorage.getItem("userid")}).then(res=>{
      console.log(res);
      this.orderList = res.data.data 

    })
    
}
}


</script>

<style scoped>
.top10 ul li div h4 {
  font-weight: 400;
}
.top10 ul li div p{
  color: #ee0a24;
}
.top10 ul li div p span{
  font-size: 18px;
}

.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.prolist1 li {
  width: 49%;
}

.prolist1 li img {
  border: 1px solid gray;
}
</style>